<template>
<!-- 注意：添加了新页面一定要在index.js里面导入 -->
<!-- 引入container布局 -->

<el-container class="home-container">   
    <!-- 头部 -->
    <el-header>
        <div>
            <!-- 注意路径：../是返回上级目录 -->
            <img src="../assets/images/kangaroo.jpg" alt="">
            <span>饱团美食平台</span>
        </div>
        <el-button type="info" @click="logout">退出</el-button>
    </el-header>

    <!-- 主体 -->
    <el-container>

      <!-- 侧边栏 -->
      <el-aside :width="isCollapse?'64px':'200px'">
          <el-button class="toggle-button" @click="toggleCollapse()" icon="el-icon-s-operation"></el-button>
      <el-menu text-color="#000" active-text-color="#409eff"
       unique-opened :collapse="isCollapse" :collapse-transition="false" :router="true" :default-active="activePath">
      <!-- 一级菜单 -->
      <!-- 属性前面加冒号进行数据绑定 -->
          <el-submenu :index="item.id+''" v-for="item in menuList" :key="item.id">
        <template #title>
          <i :class="iconsObject[item.id]"></i>
          <span>{{item.title}}</span>
        </template>
        
      <!-- 二级菜单 -->
      <!-- 索引应该放的是路径，因为点击菜单跳转要加上路径才能进行访问 -->
      <el-menu-item :index="it.path" v-for="it in item.sList" :key="it.id" @click="saveNavState(it.path)">
        <template #title>
          <i :class="iconsObject[it.id]"></i>
          <span>{{it.title}}</span>
        </template>
      </el-menu-item>

      </el-submenu>
      </el-menu>
      </el-aside>
      <!-- 主题内容 -->
      <el-main>
          <!-- 存放跳转页面 -->
          <router-view></router-view>      
      </el-main>

    </el-container>

</el-container>

</template>
<script>
export default{
    data(){
        return{
            //菜单列表
            menuList:[],
            isCollapse:false,
            iconsObject:{
                "100":"iconfont czx-listlook",
                "101":"el-icon-user-solid",
                "200":"iconfont czx-kinds",
                "201":"iconfont czx-u36",
                "202":"iconfont czx-name",
                "203":"iconfont czx-hand",
            },
            activePath:'/welcome',//默认路径
        }

    },
    //onload（加载时）事件
    created(){
        // 查询menuList
        this.getMenuList();
        this.activePath = window.sessionStorage.getItem('activePath');//取出session里的path，动态修改activePath

    },
    methods:{
        //安全退出方法
        logout(){
            window.sessionStorage.clear();//清除session，即清除用户信息
            this.$router.push("/login");//回到首页
        },
        //获取导航菜单方法
        async getMenuList(){
            const {data:res} = await this.$http.get("/menus");//请求获取用get方法
            console.log(res);
            if(res.flag != 200){
            console.log("获取列表失败！！！");   
            return this.$message.error("获取列表失败！！！");//访问失败的错误信息
            }
            this.menuList = res.menus;//数据回填
        },
        //控制伸缩
        toggleCollapse(){
            this.isCollapse = !this.isCollapse;
        },
        //保存路径
        saveNavState(activePath){
            window.sessionStorage.setItem('activePath',activePath);//存放在session里
            this.activePath = activePath;

        }
    },

}
</script>
<style scoped>
/* 布局器样式 */
.home-container{
    height: 100%;
}
/* 头部样式 */
.el-header{
    background-color: orange;
    display: flex;
    /* 左右贴边 */
    justify-content: space-between;
    /* 左边界 */
    padding-left: 0%;
    color: #fff;
    font-size: 20px;
    /* align：设置与指定参照物对齐方式 */
    /* margin：设置边距 */
    align-items: center;
}
/* 侧边栏样式 */
.el-aside{
    background-color: orange;
}
.el-menu{
    border-right: none;
    background-color:whitesmoke;
}
/* 主体样式 */
.el-main{
    background-color: #eaedf1;
}
/* 伸缩按钮样式 */
.toggle-button{
    background-color: whitesmoke;
    letter-spacing: 0.55em;
    width: 200px;
    /* 显示小手指 */
    cursor: pointer;
}
img{
    width:62px;
    height: 59px;
}
span{
    margin-left: 15px;
}
div{
    display: flex;
    align-items: center;
}

</style>